<template>
	<div class="Body"><!-- 主体框 -->
		<h1 style="text-align: center;color: #2c92f8;">农产品</h1>
		<div class="farmBody"><!-- 农产品内容与分类大框 -->
			<div class="framHot">
				<h1>热门</h1>
				<ul v-for="(item,index) in topfarmData" :key="index" v-if="index < 10">
					<li @click="skipFarmInfo(item.farmId)">{{item.farmName}}</li>
				</ul>
			</div>
			<div class="FarmBox">
				<el-card class="farmCard" @click.native="skipFarmInfo(item.farmId)" v-for="(item,index) in farmData"
					:key="index" v-if="index < 6" shadow="hover">
					<img :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture" />
					<div style="margin-bottom: 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
						<span>{{item.farmName}}</span>
					</div>
					<div>
						<span style="color: red;">￥{{minSpecPrice(item)}}元</span>
					</div>
				</el-card>
			</div>
		</div>
		<h1 style="text-align: center;color: #2c92f8;">农家乐</h1>
		<div class="HouseBody"><!-- 农家乐内容与热门大框 -->
			<div class="HouseBox">
				<el-card class="HouseCard" @click.native="skipHouseInfo(item.houseId)" v-for="(item,index) in houseData"
					:key="index" v-if="index < 6" shadow="hover">
					<img :src="$store.state.imgShowRoad2 + '/file/' + item.housePicture.split(',')[0]" />
					<div style="padding: 10px;">
						<div style="display: flex;justify-content: space-between;margin-bottom: 15px;">
							<span>{{item.houseName}}</span>
							<div style="font-size: 13px;">
								【{{item.houseRregion.split(',')[0]}}——
								<template v-if="item.houseRregion.split(',').length < 3">
									{{item.houseRregion.split(',')[1]}}】
								</template>
								<template v-else>
									{{item.houseRregion.split(',')[2]}}】
								</template>
							</div>
						</div>
						<div>
							<span style="color: red;">￥{{item.housePrice}}</span>
						</div>
					</div>
				</el-card>
			</div>
			<div class="Househot">
				<h1>热门</h1>
				<ul v-for="(item,index) in houseData" :key="index" v-if="index < 7">
					<li><em></em>{{item.houseName}}</li>
				</ul>
			</div>
		</div>
		<h1 style="text-align: center;color: #2c92f8;">旅游景点</h1>
		<div class="SpotBody"><!-- 旅游景点内容与分类大框 -->
			<div class="spotHot">
				<h1>热门</h1>
				<ul v-for="(item,index) in spotData" :key="index" v-if="index < 8">
					<li><em></em>{{item.spotName}}</li>
				</ul>
			</div>
			<div class="SpotBox">
				<el-card class="spotCard" @click.native="skipScenicInfo(item.spotId)" v-for="(item,index) in spotData"
					:key="index" v-if="index < 6" shadow="hover">
					<div style="position: relative;">
						<img :src="$store.state.imgShowRoad2 + '/file/' + item.spotPicture.split(',')[0]" />
						<span>
							{{item.spotName}}
						</span>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import farmApi from "@/api/farm.js"
	import houseApi from "@/api/farmHouse.js"
	import spotApi from "@/api/scenicSpot.js"
	export default {
		data() {
			return {
				topfarmData:[],
				farmData: [],
				houseData: [],
				spotData: [],
			}
		},
		computed: {
			
		},
		methods: {
			async FarmAll() {
				const res = await farmApi.SearchFarm("/znFarmproduce/SearchFarm");
				if (res.code == 200) {
					this.farmData = res.data;
				}
			},
			async getTopfarmData(){
				const res = await farmApi.getTopfarmData("/znFarmproduce/getProduceTop");
				if (res.code == 200) {
					this.topfarmData = res.data;
				}
			},
			async SearchHomeAll() {
				const res = await houseApi.SearchHomeAll("/znFarmhouse/SearchHomeAll");
				if (res.code == 200) {
					this.houseData = res.data;
				}
			},
			async SearHomeSpot() {
				const res = await spotApi.SearHomeSpot("/znScenicspot/SearHomeSpot");
				if (res.code == 200) {
					this.spotData = res.data;
				}
			},
			minSpecPrice(item) {
				// 计算每个 item 对应的最小 znSpecPrice
				if (!item || !item.specificationBeans) {
					return null;
				}
				const prices = item.specificationBeans.map(spec => spec.znSpecPrice);
				const minPrice = Math.min(...prices);
				return minPrice;
			},
			skipFarmInfo(item) {
				this.$router.push({
					path: `/FarmInfoPage/${item}`
				}).catch(err => err);
			},
			skipHouseInfo(item) {
				this.$router.push({
					path: `/HouseInfoPage/${item}`
				}).catch(err => err);
			},
			skipScenicInfo(item) {
				this.$router.push({
					path: `/ScenicInfoPage/${item}`
				}).catch(err => err);
			}
		},
		created() {
			this.FarmAll();
			this.SearchHomeAll();
			this.SearHomeSpot();
			this.getTopfarmData();
		}
	}
</script>

<style lang="scss" scoped>
	.Body {
		margin: 0 15% 0 15%;

		.farmBody {
			width: 100%;
			display: flex;

			.FarmBox {
				width: 80%;
				display: flex;
				flex-wrap: wrap;

				.farmCard {
					margin: 0 15px 15px 0;
					width: 335px;

					img {
						border-radius: 10px;
						margin: 0 0 10px 0;
						width: 100%;
						height: 100%;
					}
				}
			}

			.framHot {

				margin-right: 20px;
				width: 18%;
				height: 86.5vh;
				background-color: #e7e7e7;
				border-radius: 4px;

				h1 {
					margin: 30px 0 50px 10px;
					line-height: 0;
					font-size: 26px;
					color: #2c92f8;
				}

				ul {
					overflow: hidden;
					margin-left: 35px;
					list-style: none;
					/* 去除默认点样式 */
					padding-left: 0;
					font-size: 16px;

					li {
						cursor: pointer;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-bottom: 30px;
					}
				}
			}
		}

		.HouseBody {
			width: 100%;
			display: flex;

			.HouseBox {
				width: 80%;
				display: flex;
				flex-wrap: wrap;

				.el-card ::v-deep .el-card__body {
					padding: 0;
				}

				.HouseCard {
					margin: 0 15px 15px 0;
					// height: 38%;
					width: 335px;

					img {
						border-radius: 5px;
						width: 100%;
						height: 100%;
					}
				}
			}

			.Househot {
				margin-right: 20px;
				width: 18%;
				height: 66vh;
				background-color: #e7e7e7;
				border-radius: 4px;

				h1 {
					margin: 30px 0 50px 10px;
					line-height: 0;
					font-size: 26px;
					color: #2c92f8;
				}

				ul {
					overflow: hidden;
					margin-left: 35px;
					list-style: none;
					/* 去除默认点样式 */
					padding-left: 0;
					font-size: 16px;

					li {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-bottom: 30px;
					}
				}
			}
		}

		.SpotBody {
			width: 100%;
			display: flex;

			.SpotBox {
				width: 80%;
				display: flex;
				flex-wrap: wrap;

				.el-card ::v-deep .el-card__body {
					padding: 0;
				}

				.spotCard {
					margin: 0 15px 15px 0;
					height: 250px;
					width: 335px;

					img {
						overflow: hidden;
						line-height: 0;
						border-radius: 5px;
						width: 100%;
						height: 250px;
						transition: transform 0.3s ease-in-out;
					}

					span {
						width: 100%;
						display: block;
						position: absolute;
						bottom: 0;
						left: 0;
						color: #fff;
						background: rgb(0, 0, 0, 0.6);
						font-size: 14px;
						line-height: 35px;
						height: 35px;
						text-align: center;
					}

					img:hover {
						transform: scale(1.2);
					}
				}
			}

			.spotHot {
				margin-right: 20px;
				width: 18%;
				height: 54.3vh;
				background-color: #e7e7e7;
				border-radius: 4px;

				h1 {
					margin: 30px 0 50px 10px;
					line-height: 0;
					font-size: 26px;
					color: #2c92f8;
				}

				ul {
					margin-left: 35px;
					list-style: none;
					/* 去除默认点样式 */
					padding-left: 0;
					font-size: 16px;
					overflow: hidden;

					li {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
</style>